<script setup lang="ts">
import { ref } from "vue";

const tabs = ref([
  {
    name: "学情概览",
  },
  {
    name: "我的课表",
  },
  {
    name: "我的课程",
  },
  {
    name: "我的作业",
  },
  {
    name: "待办事项",
  },
]);
</script>

<template>
  <div class="container m-top-20">
    <!-- tab栏 -->
    <div style="padding: 10px 40px; background-color: red">
      <div v-for="(item, index) in tabs" :key="index">{{ item.name }}</div>
    </div>
    <div style="margin-left: 10px">
      <div style="background-color: #fff">
        <marquee>
          <div style="display: flex">
            <img
              src="@/assets/images/Core/tongzhi.png"
              alt=""
              style="width: 18px"
            />
            <div style="display: flex; margin-left: 6px">
              <div>通知：1月18日开始放假，祝大家新年快乐！</div>
              <div style="margin-left: 40px">
                2月10日开始上课，请大家合理安排时间！
              </div>
              <div style="margin-left: 40px">
                祝大家2025元旦快乐，龙年大吉，元旦休息一天，happy new year!
              </div>
            </div>
            <!-- <div v-for="(item, index) in topList" :key="index">
            请<span style="color: #FF1D1D;"><span ml-10px mr-10px>{{ item.patientName }}</span> </span>至<span style="color: #FF1D1D;" ml-10px mr-10px>{{ item.roomName }}</span>就诊，
          </div> -->
          </div>
        </marquee>
      </div>
      <div style="margin-top: 10px; background-color: #fff">
        <div class="trapezoid"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.trapezoid {
  width: 200px;

  height: 0;

  border-bottom: 100px solid blue;

  border-left: 50px solid transparent;

  border-right: 50px solid transparent;
}

.container {
  display: flex;
  margin-top: 10px;
}
</style>
